<template>
	<view v-if="chuangyejin_data_list_cuozuo == 1" class="d-kuan">
    <view class="d-kuan">
      <uv-row customStyle="margin-bottom: 10px;margin-top: 30px">
      	<uv-col span="4" customStyle="display: flex; justify-content: center; align-items: center;">
      		<view>
            <uv-count-to color="#ff650c" :startVal="0" :endVal="chuangyejin_data_add.chuangyejin_sum"></uv-count-to>
            <text>元</text>
          </view>
      		<uv-icon name="checkbox-mark"  color="#7f7f7f" labelColor="#7f7f7f" size="22" label="已申请"></uv-icon>
      	</uv-col>
      	<uv-col span="4" customStyle="display: flex; justify-content: center; align-items: center;">
          <view>
            <uv-count-to color="#ff650c" :startVal="0" :endVal="chuangyejin_data_add.chuangyejin_renshu"></uv-count-to>
            <text>位</text>
          </view>
      		<uv-icon name="account" color="#7f7f7f" labelColor="#7f7f7f" size="20"  label="申请人数"></uv-icon>
      	</uv-col>
      	<uv-col span="4" customStyle="display: flex; justify-content: center; align-items: center;">
          <view>
            <uv-count-to color="#ff650c" :startVal="0" :endVal="chuangyejin_data_add.chuangyejin_shengyu"></uv-count-to>
            <text>元</text>
          </view>
      		<uv-icon name="integral" color="#7f7f7f" labelColor="#7f7f7f" size="20"  label="还剩余"></uv-icon>
      	</uv-col>
      
      </uv-row>
      <view class="d-kuan">
        <view class="d-kuan" style="background-color: #e5fefd;border-radius: 10px 10px 0 0;">
          <view class="d-neikuang-10">
            <view class="d-wenzi-16 d-jiacu d-wenzi-hei d-juzhong">
              {{ chuangyejin_data_add.title }}
            </view>

            <view class="d-shang-10"><text>总 创业金：</text><text>{{ chuangyejin_data_add.cyjje }}</text></view>
            <view class="d-shang-10"><text>数量：</text><text>{{ chuangyejin_data_add.shuliang }}</text> 份</view>
            <view class="d-shang-10"><text>每人可申请：</text><text>{{ chuangyejin_data_add.sqsc }}</text> 次</view>
            <view class="d-shang-10"><text>结束时间：</text><text>{{ chuangyejin_data_add.jssj }}</text></view>
          </view>
        </view>
		<view class="d-kuan" style="background-color: #d4fefe;border-radius:  0 0 10px 10px;">
			<view class="d-neikuang-10">
				<uv-steps :current="chuangyejin_data_add.jssj_zhi" active-color="#3c9cff" inactive-color="#999">
					<uv-steps-item bgcolor="#d4fefe"  title="开始" >
						
					</uv-steps-item>
					<uv-steps-item bgcolor="#d4fefe"  title="进行中" >
						
					</uv-steps-item>
					<uv-steps-item bgcolor="#d4fefe" title="结束" :desc="chuangyejin_data_add.jssj">
						
					</uv-steps-item>
				</uv-steps>
			</view>
		</view>
      </view>
	  <!--申请-->
	    <view class="d-kuan d-shang-10">
			<view v-for="(t,index) in chuangyejin_data_add.chuangyejin" class="d-neikuang-10 d-shang-10 d-yuanjiao-10" style="background-color: #f7f7f7;">
				<view class="d-zuo">
					<text class="" style="color: #262626;" >申请创业金：</text>
					<text class="d-wenzi-18 d-jiacu" style="color: #02c7b6;">{{t.name}}</text>
					<text class="d-wenzi-14 d-jiacu" style="color: #02c7b6;">元</text>
				</view>
				<view class="d-you">
					
					<uv-button @click="chuangyejin_shenqing(index+1,t.name,t.zhifu)" :plain="true" shape="circle" style="width: 80px;color: #dc500e;" type="default" size="small" class="d-jiacu" :text="t.zhifu+'元申请'"></uv-button>
				</view>
				<view class="d-clear"></view>
				<view class="d-kuan d-wenzi-12 d-shang-5" style="color: #595959;">
					可用创业金：{{t.name}} + {{t.zhifu}} =  {{parseFloat(t.name || 0) + parseFloat(t.zhifu || 0)}} 元
				</view>
				<view class="d-clear"></view>
				<view class="d-kuan d-wenzi-12 d-shang-5" style="color: #595959;">
					创业金可以消费购买：{{t.shuoming}}
				</view>
				<view class="d-clear"></view>
			</view>
		</view>
		<!--用户的申请-->
		<view class="d-kuan d-shang-10">
			<!--充值-->
			<view v-if="uid" class="d-kuan d-clear d-xia-10">
				<view class="d-zuo">
					<text class="d-zuo d-wenzi-12" style="color: #dc500e;">你的创业金：{{ uid_data.score }} 元</text>
				</view>
				<view class="d-you">
					<text class="d-zuo d-wenzi-12" style="color: #dc500e;">余额：{{ uid_data.money }}</text>
					<uv-icon @click="show_zhifu" name="red-packet" label="充值 " class="d-zuo-10 d-you"></uv-icon>
				</view>
			
			</view>
			<view class="d-clear"></view>
			<view v-if="uid" class="d-kuan d-clear d-xia-10 d-shang-20 d-yuanjiao-10" style="background-color: #f7f7f7;">
				<view class="d-neikuang-10">
					<view class="d-kuan d-wenzi-12">
						你已经申请 <text style="color: #dc500e;">{{ chuangyejin_data_add.uid_goumai_shu}}</text> 次
					</view>
					<view class="d-kuan d-wenzi-12">
						申请到的创业金 <text style="color: #dc500e;">{{ chuangyejin_data_add.uid_chuangyejin}}</text> 元
					</view>
				</view>
			</view>
		</view>

    </view>

	</view>
</template>

<script>
import Api from '@/utils/api.js'; //postChuangyejin_data_add_api
import ChuangyejinApi from '@/utils/chuangyejin_api.js';
import { getRequest,postRequest } from '@/utils/wxRequest.js';
export default {
  props: {
    // 接收显示状态属性
    chuangyejin_data_show: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    },
    cid: {
      type: String,
      default: ''
    },
    uid_data: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
      // 初始化wwwData对象，提供默认值
      wwwData: {
        www: '加载中...'
      },
      chuangyejin_data_add:{
        cyj_id:'',
        title:'',
        zhuangtai:2,
        id:'',
        jssj:'',
        cyjje:'', // 总创业金
        shuliang:'', // 数量
        sqsc:'', // 申请次数
        // 初始化创业金数组，确保模板中的v-model绑定不会出错
        chuangyejin: [
          {
            name: '',
            zhifu: '',
            shuoming: ''
          }
        ]
      },
      chuangyejin_data_list_cuozuo:0,
    }
  },
  created() {
    // 直接调用组件自身的$getWwwData方法
    this.getWwwDatas();
      // 立即触发检测接口
    this.chuangyejin_cunzai_api();
  },
  watch: {
  },
    computed: {
		keycode() {
		  return $store.state.keycode;
		},
		uid() {
		  return this.$store.state.memberuid;
		},
	},
  methods: {
    // 定义一个方法，用于获取www数据
    async getWwwDatas() {
      try {
        const res = await this.$getWwwData();
        //console.log('获取到的www数据:', res);
        // 处理获取到的www数据，例如更新组件的状态
        this.wwwData = res;
      } catch (error) {
        console.error('获取www数据失败:', error);
      }
    },
        //立即触发检测接口
    async chuangyejin_cunzai_api() {
      let uid = this.$store.state.memberuid;
      let code = this.$store.state.keycode;
      let url = ChuangyejinApi.getChuangyejin_cunzai_api(uid,code,this.id,this.cid);
      try {
        let res = await getRequest(url);
        if(res.data.code==1){
          // 如果有数据，直接赋值
          this.chuangyejin_data_add = res.data.data;
          // 确保chuangyejin数组存在
          if(!this.chuangyejin_data_add.chuangyejin) {
            this.chuangyejin_data_add.chuangyejin = [{name: '', zhifu: '', shuoming: ''}];
          }
          this.chuangyejin_data_list_cuozuo = 1; 
        } else {
          // 如果没有数据，重置为初始结构而不是空对象
          this.chuangyejin_data_add = {
            cyj_id:'',
            title:'',
            zhuangtai:2,
            id:'',
            jssj:'',
            cyjje:'',
            shuliang:'',
            sqsc:'',
            chuangyejin: [
              {
                name: '',
                zhifu: '',
                shuoming: ''
              }
            ]
          };
          this.chuangyejin_data_list_cuozuo = 0;
        }
      } catch (error) {
        console.error('获取创业金数据失败:', error);
        // 发生错误时也保持正确的结构
        this.chuangyejin_data_add = {
          cyj_id:'',
          title:'',
          zhuangtai:2,
          id:'',
          jssj:'',
          cyjje:'',
          shuliang:'',
          sqsc:'',
          chuangyejin: [
            {
              name: '',
              zhifu: '',
              shuoming: ''
            }
          ]
        };
        this.chuangyejin_data_list_cuozuo = 0;
      }
    },
    // 显示充值弹窗
    show_zhifu(){
      //this.show = true;
      // 传值到父组件
      console.log('传值到父组件');
      this.$emit('zhifu_show',true);
    },
    chuangyejin_shenqing(index,name,zhifu){
      console.log('创业金申请',index);
      // 弹出确认提示
      uni.showModal({
        title: '确认申请',
        content: '是否确认申请创业金？一旦申请成功无法退款！',
        success: (res) => {
          if (res.confirm) {
            // 用户点击了确认
            console.log('用户点击了确认');
            // 调用申请创业金的方法
            this.chuangyejin_shenqing_api(index,name,zhifu);
          } else if (res.cancel) {
            // 用户点击了取消
            console.log('用户点击了取消');
          }
        }
      });
    },
    // 创业金申请接口
    async chuangyejin_shenqing_api(index,name,zhifu){
      let uid = this.$store.state.memberuid;
      let code = this.$store.state.keycode;
      let url = ChuangyejinApi.postChuangyejin_shenqing_api(uid,code,this.id,this.cid);
      
      
      var id_data = '&data[quanid]='+this.cid+'&data[tieid]='+this.id;
      var chuangyejin_data = '&data[chuangyejin]='+name+'&data[jine]='+zhifu;
      var datas = "is_ajax=1&data[cid]="+this.chuangyejin_data_add.cyj_id+"&data[title]="+encodeURIComponent(this.chuangyejin_data_add.title)+"&catid=1"+id_data+chuangyejin_data;
      
      try {
        let res = await postRequest(url,datas);
        if(res.data.code==1){
          // 申请成功
          uni.showToast({
            title: '申请成功',
            icon: 'success',
            duration: 2000
          });
          // 刷新数据
          this.chuangyejin_cunzai_api();
        } else {
          // 申请失败
          uni.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 2000
          });
        }
      } catch (error) {
        console.error('创业金申请失败:', error);
        // 申请失败
        uni.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 2000
        });
      }
    },

    
  }
}
</script>

<style>
.warp_chuangyejin {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.rect_chuangyejin {
	width: 300px;
	/*height: 300px;*/
	padding: 10px;
	background-color: #fff;
	border-radius: 10px;
}
#d-gundong {
  max-height: 200px; /* 设置最大高度，超出部分将滚动 */
  overflow-y: auto; /* 允许垂直方向滚动 */
  padding-right: 5px; /* 为滚动条留出空间 */
}

/* 自定义滚动条样式（可选） */
#d-gundong::-webkit-scrollbar {
  width: 6px;
}

#d-gundong::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

#d-gundong::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

#d-gundong::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>